<template>
    <h1>
        HOME
    </h1>
    <ul>
        <li v-for="book in bookList">
            {{ book.name }}
        </li>
    </ul>
    <div>
        <button @click="counter += 1">Add 1</button>
        <p>This button clicked {{ counter }} times.</p>
    </div>
    <div>
        <button @click="counterAdd()">Add 1</button>
        <p>This button clicked {{ counter }} times.</p>
    </div>
    <div>
          <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <el-button>中文</el-button>
        </el-row>
    </div>
</template>
<script lang="ts">
    import { defineComponent, reactive, toRefs, onMounted, onActivated } from "vue";
    import {
        Location,
        Document,
        Setting,
    } from '@element-plus/icons-vue';

    export default defineComponent({
        data() {
            return {
                bookList: [
                    {name: 'Book1', description: 'Boooook1'},
                    {name: 'Book2', description: 'Boooook2'}
                ],
                counter: 0
            }
        },

        methods: {
            counterAdd() {
                this.counter ++;
            }
        }
    });
</script>